/*
 * author: downey
 * version: 1.0.0
 * git: http://git.kekuming.xin/downey/downey-canvas-charts.git
 */
import Base from './base'

export default class Treemap extends Base {

  /* 构造函数 */
  constructor(option = {}) {
    const parameter = {
      center: [0, 0],
      data: [500, 150, 150],
      splitSpace: 20,
      dataStyle: [
        {
          text: '厨房',
          textColor: 'rgba(254, 252, 242, 1)',
          fillColor: 'rgba(66, 145, 219, 1)',
          borderWidth: 4,
          borderColor: 'rgba(66, 145, 219, .3)',
          fontSize: 16
        },
        {
          text: '卧室',
          textColor: 'rgba(254, 252, 242, 1)',
          fillColor: 'rgba(66, 145, 219, 1)',
          borderWidth: 4,
          borderColor: 'rgba(66, 145, 219, .3)',
        },
        {
          text: '厕所',
          textColor: 'rgba(254, 252, 242, 1)',
          fillColor: 'rgba(157, 200, 210, 1)',
          borderWidth: 4,
          borderColor: 'rgba(157, 200, 210, .3)',
        }
      ],
    };
    super(option, parameter);
  }

  // 重写计算保存全局变量
  getGlobal() {
    this.sumData = this.getSum();
  }

  test() {
    // 500 250 250 = 1000
    // 800 150 50 = 1000
    // 200 400 400 = 1000
    // 1000 0  0

    // this.drawRect(0, 0, this.data[0] / this.sumData * tw, h, '厨房', 'rgba(66, 145, 219, 1)', 4, 'rgba(66, 145, 219, .3)');
    //
    // this.ctx.save();
    // this.ctx.translate(s, 0);
    // this.drawRect(this.data[0] / this.sumData * tw, 0, (this.sumData - this.data[0]) / this.sumData * tw, this.data[1] / (this.sumData - this.data[0]) * th, '卧室', 'rgba(66, 145, 219, 1)', 4, 'rgba(66, 145, 219, .3)');
    // this.ctx.restore();
    //
    // this.ctx.save();
    // this.ctx.translate(s, s);
    // this.drawRect(this.data[0] / this.sumData * tw, this.data[1] / (this.sumData - this.data[0]) * th, (this.sumData - this.data[0]) / this.sumData * tw, this.data[2] / (this.sumData - this.data[0]) * th, '厕所', 'rgba(157, 200, 210, 1)', 4, 'rgba(157, 200, 210, .3)');
    // this.ctx.restore();
  }

  // 绘制逻辑
  drawLogic() {
    // 宽 高 间距（包括边框）
    const x = 0, y = 0, w = this.width, h = this.height, s = this.splitSpace;
    // 减去间距的h
    const len = this.data.length, th = h - (len - 2) * s, tw = w - s, mw = 1, mh = th / (len - 1);

    this.data.forEach((v, k) => {
      let {text, textColor, fontSize, fillColor, borderWidth, borderColor} = {...this, ...this.dataStyle[k]} || {};
      fillColor = this.getColor(fillColor);
      borderColor = this.getColor(borderColor);
      if (k === 0) {
        let ew = this.data[0] / this.sumData * tw;
        if (ew >= tw * mw) ew = tw * mw;
        this.drawRect(0, 0, ew, h, text, fillColor, borderWidth, borderColor, textColor, fontSize);
        this.points.push([x, y, ew, h]);
      } else {
        let sx = this.data[0] / this.sumData * tw;
        const sy = k === 1 ? 0 : this.points[k - 1][3];
        let eh = this.data[k] / (this.sumData - this.data[0]) * th || 0;
        let ew = tw - sx;
        // if (sx >= tw * mw) {
        //   sx = tw * mw;
        //   ew = tw * (1 - mw);
        //   if (eh <= mh) eh = mh;
        // }
        this.ctx.save();
        this.ctx.translate(s, (k - 1) * s);
        this.drawRect(sx, sy, ew, eh, text, fillColor, borderWidth, borderColor, textColor, fontSize);
        this.ctx.restore();

        eh = sy + eh;
        this.points.push([sx, sy, ew, eh]);
      }
    });

    this.ctx.restore();
  }

  // 画面积矩形
  drawRect(x = 0, y = 0, w = 50, h = 50, text = '', fillColor = 'rgba(66, 145, 219, 1)', border = 4, borderColor = 'rgba(66, 145, 219, 0.3)', textColor = 'rgba(254, 252, 242, 1)', fontSize = 16) {
    this.ctx.beginPath();

    this.ctx.lineWidth = border;
    this.ctx.strokeStyle = borderColor;
    this.ctx.strokeRect(x + border / 2, y + border / 2, w - border, h - border);

    this.ctx.fillStyle = fillColor;
    this.ctx.fillRect(x + border, y + border, w - border * 2, h - border * 2);

    this.ctx.save();
    this.ctx.translate((w - border) / 2, (h - border + fontSize) / 2);
    this.setFont(textColor, 'center', fontSize);
    this.ctx.fillText(text, x, y);
    this.ctx.restore();

    this.ctx.closePath();
  }

  // TODO hover数据

}
